<template>
  <div class="navigation" >
    <ul class="navMenu">
      <li v-for="menu in navMenu" :key="menu.text" class="navMenu-item">
        <a href="#">{{menu.text}}</a>
      </li>
    </ul>
    <div class="search-box">
      <img class="search-icon" src=""/>
      <input type="text" :placeholder="serachText"/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navigation',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      navMenu: [
        {text: '主页'},
        {text: 'Web开发'},
        {text: 'Node.js'},
        {text: '无线开发'},
        {text: '工具&平台'},
        {text: '团队生活'},
        {text: '关于我们'},
      ],
      serachText: '搜索',
    };
  },
  methods: {
    sayHello: function () {
      alert('hello');
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url('./style.css');
</style>
